<template>
	<view class="keyboard show">
		<view class="keyboard-content">
			<view class="keyboard-content-left">
				<view class="keyboard-content-left-item" v-for="item in KeyboardNumber"  :index="item" @click="_setValue(item)" >
					<view class="keyboard-content-left-item-cell hover">
						{{item}}
					</view>
				</view>
				<view class="keyboard-content-left-item" @click="_setValue('.')">
					<view class="keyboard-content-left-item-cell hover" >.</view>
				</view>
			</view>
			<view class="keyboard-content-right">
				<view class="keyboard-content-right-item" @click="_setValue('delete')">
					<view class="keyboard-content-right-item-cell hover">
						<image class="icon" src="@/static/backspace.png" mode="aspectFill"></image>
					</view> 
				</view>
				<view class="keyboard-content-right-item" @click="confirm">
					<view class="keyboard-content-right-item-confirm" :class="{'disable':!money,'hover':money}" :style="{'background-color':btnColor }">{{confirmText}}</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	export default {
		props:{
			show:{
				default:false,
				type:Boolean
			},
			dark:{
				default:false,
				type:Boolean
			},
			btnColor:{
				default:'#07C160',
				type:String
			},
			confirmText:{
				default:'提交',
				type:String
			},
			value:{
				default:'',
				type:[Number,String]
			}
		},
		data(){
			return {
				KeyboardNumber:[1,2,3,4,5,6,7,8,9,0],
				money:''
			}
		},
		created(){
			this.money+=this.value
		},
		methods:{
			_setValue:function(e){
				switch(e){
					case 'delete':
		                if (this.money != '0.00' && this.money.length > 0){this.money = this.money.substring(0, this.money.length - 1)}
		                if (this.money.length <= 0){this.money = '0.00';}
		                this.money = this.money;
						break
					default:
						if (this.money == '0.00' && e != null) {
		                    this.money = e.toString();
		                } else {
		                    let arr = this.money.split('.');
		                    if (e == '.' && arr.length > 1) {
		                    } else if (arr.length <= 1 || (arr.length > 1 && arr[1].length <= 1)) {
		                        if (this.money == '0' && e != '.') {
		                            this.money = e.toString();
		                        } else if (this.money != '0' || e != '0'){
		                            this.money += e;
		                        }
		                    }
		                }
				}
				this.$emit("change",this.money)
			},
			confirm:function(){
				if(this.money.length>0){
					this.$emit("confirm",this.money)
				}
			},
		}
	}
</script>
<style lang="less" scoped>
	.keyboard{
		position:fixed;
		left: 0;
		transform: translateY(100%);
		transition: all 0.3s ease;
		bottom: 0;
		background-color: #F7F7F7;
		width: 100%;
		padding: 20rpx 0 40rpx 0;
		box-sizing: border-box;
		.keyboard-content{
			display: flex;
			.keyboard-content-left{
				width: 75%;
				display: flex;
				flex-wrap: wrap;
				.keyboard-content-left-item{
					flex-basis: 33%;
					flex-grow: 1;
					padding: 0 0 15rpx 15rpx;
					box-sizing: border-box;
					.keyboard-content-left-item-cell{
						background-color: #ffffff;
						border-radius: 8rpx;
						text-align: center;
						font-size: 46rpx;
						line-height: 92rpx;
						font-weight: 500;
					}
					.keyboard-content-left-item-cell:active{
						background-color: rgba(0,0,0,0.1);	
					}
				}
				.keyboard-content-left-item:nth-child(10){
					flex-basis: 66%;
					flex-grow:1;
				}
			}
			.keyboard-content-right{
				width: 25%;
				display: flex;
				flex-direction: column;
				box-sizing: border-box;
				.keyboard-content-right-item{
					width: 100%;
					padding: 0 15rpx 15rpx 15rpx;
					box-sizing: border-box;
					
					.keyboard-content-right-item-cell{
						border-radius: 8rpx;
						background-color: #ffffff;
						height: 92rpx;
						line-height: 92rpx;
						padding: 20rpx;
						display: flex;
						align-items: center;
						justify-content: center;
						box-sizing: border-box;
						image{
							height: 60%;
							width: 40%;							
						}
					}
					.keyboard-content-right-item-cell:active{
						background-color: rgba(0,0,0,0.1);	
					}
				}
				.keyboard-content-right-item:nth-child(2){
					flex:1;
					.keyboard-content-right-item-confirm{
						background-color: #07C160;
						opacity: 1;
						color: rgba(255,255,255,0.8);
						height: 100%;
						border-radius: 8rpx;
						display: flex;
						justify-content: center;
						align-items: center;
						overflow: hidden;
						white-space: nowrap;
						text-overflow: ellipsis;
					}
					.disable{
						opacity: 0.4;
					}
					.hover:active{
						//background-color: rgba(8,165,82,1);	
						opacity: 0.8;
					}
				}
			}
		}
	}
	.show {
			transition: all 0.3s ease;
			transform: translateY(0%) !important;
		}
</style>